<template>
  <div>
    <h2>vue2</h2>
    <p>{{ count }}</p>
    <el-button type="danger" @click="addCount">+1</el-button>
    <p>{{ treeData }}</p>
    <el-button type="warning" @click="addTree">添加子节点</el-button>
  </div>
</template>

<script>
export default {
  name: "treeData",
  data() {
    return {
      treeData: [
        {id: 1, name: 'parent1', children: [{id: 11, name: 'child11'}, {id: 12, name: 'child12'}]},
        {
          id: 2,
          name: 'parent2',
          children: [{id: 21, name: 'child21'}, {id: 22, name: 'child22'}, {id: 23, name: 'child23'}]
        },
        {id: 3, name: 'parent3', children: [{id: 31, name: 'child31'}]},
      ],
      count: 1
    }
  },
  methods: {
    addCount() {
      this.count++
    },
    addTree() {
      const obj = {
        id: Date.now(),
        name: Math.random()
      }
      // this.treeData[0].children = []
      // this.treeData[0].children.push(obj)
      this.$set(this.treeData[1],'children',[obj])
    }
  }
}
</script>

<style scoped>

</style>
